import React from 'react'
import '../assets/css/cate.css'
// import { SideBar } from 'antd-mobile'
import { Getcate, Getgoods,Getindexgoods } from '../request/api'
import { Link ,useNavigate} from 'react-router-dom'
class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            leftList: [],
            goodlist: [],
            catelist:[],
            flag:1
        }
    }
    componentDidMount() {
        Getcate().then(res => {
            this.setState({
                leftList: res.list
            })
        })
        Getindexgoods().then(res => {
            console.log(res, 'right11');
            this.setState({
                goodlist: res.list,
                catelist:res.list[0].content
                
            })
        })
        
    }
   
    fn(id){
        // console.log(this,'this');
        // console.log(e);
        console.log(id-1,'id');
        let i = id -1
     
      if(i==4){
        this.setState({
            catelist:this.state.goodlist[0].content,
            
        })   
    }else{
        this.setState({
            catelist : this.state.goodlist[i].content
           })
    }
       
    }
    render() {
        const { leftList, goodlist,flag,catelist } = this.state
        return (<div id='cate'>
            {/* <h1>商品分类</h1> */}
            <div className='cateTop'>
                <h2>
                    <span className='return'></span>
                    <span>商品分类</span>
                </h2>
                <input type="text" placeholder='搜索' />
                <button>搜索</button>
            </div>
            <div className='gon'>
                <div className='cateLeft'>
                    {leftList.map(item => {
                        return (
                        <ul key={item.id}>
                            <li className='span' onClick={()=>this.fn(item.id)}>{item.catename}</li>
                        </ul>
                        )
                    }                        
                    )}
                </div>
                <div className='cateRight'>
                    {/* <h2>热门精品</h2> */}
                        {
                            catelist.map(item => {
                                return <div className='one' key={item.id}>
                                   
                                        <div className='cateone'>
                                            <div className='left'>
                                            <Link to='/index/detail' state={{ id: item.id, img: item.img, price: item.price, market_price: item.market_price, name: item.goodsname,type:1 }}>
                                                <img src={item.img} alt="" />
                                            </Link>
                                            </div>
                                            <div className='rigth'>
                                                <p className='c'>
                                                    <span className='spanl'>限时</span>
                                                    <span className='shan'>{item.goodsname}...</span>
                                                </p>
                                                {/* <p className='min'>
                                                    敏感肌可用,控油祛痘...
                                                </p> */}
                                                <div className='rigth-xia'>
                                                    <div>
                                                        <span className='span5'>&yen;{item.price}</span>
                                                        <span className='span4'><del>&yen;{item.market_price}</del></span>
                                                        <br />
                                                        <Link to='/index/cart' state={{ id: item.id, img: item.img, price: item.price, market_price: item.market_price, name: item.goodsname }}>
                                                        <div className='cart'>加入购物车</div></Link>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    
                                </div>
                            })
                        }
                    
                </div>
            </div>

        </div>)
    }
}
export default Home